<template>
  <div>child子组件 - {{ props.count }} - {{ num }} - {{ num2 }}</div>
</template>

<!-- <script>
import { ref, computed } from "vue";
export default {
  // 如果使用了setup函数，props也要写在外面
  props: ["count"],
  // setup函数可以接收一个参数为props
  // 第一个参数的作用是在setup里面的逻辑里要使用到props的值
  // props的值可以直接解构
  setup({ count }) {
    // console.log(props);
    const num = ref(count);

    const num2 = computed(() => {
      return count * 2;
    });

    return { num, num2 };
  },
};
</script> -->

<script setup>
import { ref, computed } from "vue";
// 如果是setup属性的写法，可以直接使用defineProps方法
// 里面接收的参数就是和之前props选项的属性值相同
const props = defineProps(["count"]);

const num = ref(props.count);
const num2 = computed(() => {
  return props.count * 2;
});
</script>
